<template>
	<div class="ZhuddNews shortorder list4list list4">
		<div class="ZhuddNews-title">
			<div class="title-box">
				<span class="short-title " :class="{titleactive: isshortactive}" @click="shortlong($event)">在线聊天</span>
				<span class="long-title" :class="{titleactive: islongactive}" @click="shortlong($event)">系统消息</span>
			</div>
		</div>
		<!--在线聊天-->
		<div class="ZhuddNews-left" v-show="ZhuddNewsLeft">
			<yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">

				<div class="ZhuddNews-leftitem" slot="list" v-for="ciitem,key in CartItemsdata" :key="key" @click="GOZhuddNewsInfo(ciitem.to_user,ciitem.houseId,ciitem.houseType,ciitem.nick)">
					<div class="zli-left">
						<div class="zli-iconbox">
							<img class="zli-icon" v-if="ciitem.picture==false" src="../assets/img/images/zhudd-userimg_03.png" />
							<img class="zli-icon" v-else :src="ciitem.picture" />
						</div>

					</div>
					<div class="zli-right">
						<div class="zli-textbox zli-textboxtop">
							<p class="zli-name">{{ciitem.nick}}</p>
							<p class="zli-gary">{{ciitem.lastTime}}</p>
						</div>
						<div class="zli-textbox zli-textboxbottom">

							<p class="zli-gary zli-newsgary">{{ciitem.lastMsg}}</p>
							<span class="zli-news" v-if="ciitem.notRead==1">{{redata.num}}</span>
						</div>
					</div>
				</div>
				<!-- 数据全部加载完毕显示 -->
				<span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>

				<!-- 加载中提示，不指定，将显示默认加载中图标 -->
				<img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg" />
			</yd-infinitescroll>
		</div>

		<!--系统消息-->
		<div class="ZhuddNews-right" v-show="ZhuddNewsRight">
			<div class="ZhuddNews-leftitem" v-for="mlitem,key in MsgListdata" :key="key" @click="GOorder(mlitem.msgId,mlitem.houseType,mlitem.orderId,mlitem.userType)">
				<div class="zli-right zli-item">
					<div class="zli-textbox zli-textboxtop">
						<p v-if="mlitem.userStatus==1" style="color: #A4A4A4;" class="zli-name">{{mlitem.content}}</p>
						<p v-else class="zli-name">{{mlitem.content}}</p>
					</div>
					<div class="zli-textbox zli-textboxbottom">
						<p style="width: 100%;text-align: right;" class="zli-gary">{{mlitem.createTime}}</p>
					</div>
				</div>
			</div>
		</div>

	</div>

</template>

<script>
	import { mapGetters, mapActions } from 'vuex';
	import api from '../fetch/api';
	import eventBus from "../assets/libs/eventBus.js";
	export default {
		name: "ZhuddNews",
		data() {
			return {
				redata: [],
				ischeckiconactive: true,
				shortorder: true,
				longorder: false,
				isshortactive: true,
				islongactive: false,
				ZhuddNewsLeft: true,
				ZhuddNewsRight: false,
				websock: null,
				mySessionUserinfo: JSON.parse(sessionStorage.getItem("userinfo")), //登录验证
				page: 1,
				CartItemsdata: [],
				MsgListdata: [],
				isFirstEnter: false // 是否第一次进入，默认false
			}
		},
		beforeRouteEnter(to, from, next) {
			if(from.name == 'ToderInfo' || from.name == 'LoderInfo' || from.name == 'ZhuddNewsInfo') {
				to.meta.isBack = true;
			}
			next();
		},
		activated() {
			var that = this;
			if((!that.$route.meta.isBack) || that.isFirstEnter) {
				var that = this;
				that.ischeckiconactive = true;
				that.shortorder = true;
				that.longorder = false;
				that.isshortactive = true;
				that.islongactive = false;
				that.ZhuddNewsLeft = true;
				that.ZhuddNewsRight = false;
				that.mySessionUserinfo = JSON.parse(sessionStorage.getItem("userinfo")); //登录验证
				that.page = 1;
				that.CartItemsdata = [];
				that.MsgListdata = [];
				that.isFirstEnter = false; // 是否第一次进入，默认false
				if(that.mySessionUserinfo == null) {
					that.$router.push({
						path: "/login"
					})
					return
				}
				that.initWebSocket();
				that.GetMsgListApi();
				that.setBaseInfo();
			}

			// 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
			that.$route.meta.isBack = false;
			// 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
			that.isFirstEnter = false;

		},
		created() {
			var that = this;
			that.isFirstEnter = true;
		},
		computed: {
			...mapGetters([
				'source',
				'baseInfodata',
			])
		},
		methods: {
			...mapActions({
				setBaseInfo:'setBaseInfo'
			}),
			loadList() {
				this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
				this.page++;
				this.GetCartItemsApi();
			},
			GOZhuddNewsInfo(to_user, houseId, houseType, nick) {
				let ajaxSign = {
					token: this.mySessionUserinfo.token, // string 是
					userId: this.mySessionUserinfo.id.toString(), // string 是 当前用户id
					toUser: to_user.toString(), // string 是 对应聊天用户id
				}
				let ajaxData = api.getAES(ajaxSign);
				api.SetCartSta(ajaxData)
					.then(res => {
						this.CartItemsdata = [];
						this.GetCartItemsApi();
					})
				this.$router.push({
					path: "/ZhuddNewsInfo",
					query: {
						user_id: to_user,
						houseId: houseId,
						houseType: houseType,
						nick: nick
					}
				})
			},
			shortlong(event) {
				var that = this;
				if(event.currentTarget.innerText == "在线聊天") {

					that.isshortactive = true;
					that.islongactive = false;
					that.ZhuddNewsLeft = true;
					that.ZhuddNewsRight = false;
				}
				if(event.currentTarget.innerText == "系统消息") {
					that.isshortactive = false;
					that.islongactive = true;
					that.ZhuddNewsLeft = false;
					that.ZhuddNewsRight = true;
				}

			},
			GOorder(msgId, houseType, orderId, userType) {

				let ajaxSign = {
					msgId: msgId.toString(),
					source: this.source,
					token: this.mySessionUserinfo.token, // string 是
				}
				let ajaxData = api.getAES(ajaxSign);
				api.SetMsgSta(ajaxData)
					.then(res => {
						this.GetMsgListApi();
					})
				if(houseType == 1) {
					this.$router.push({
						path: "/LoderInfo",
						query: {
							orderId: orderId.toString(),
							userType: userType.toString()
						}
					})
				}
				if(houseType == 2) {
					this.$router.push({
						path: "/ToderInfo",
						query: {
							orderId: orderId.toString(),
							userType: userType.toString()
						}
					})
				}
			},
			GetMsgListApi() {
				let ajaxSign = {
					source: this.source,
					token: this.mySessionUserinfo.token, // string 是
				}
				let ajaxData = api.getAES(ajaxSign);
				api.GetMsgList(ajaxData)
					.then(res => {
						this.MsgListdata = res.result
					})
			},
			GetCartItemsApi() {
				let ajaxSign = {
					token: this.mySessionUserinfo.token, // string 是
					userId: this.mySessionUserinfo.id.toString(), // string 是 当前用户id
					page: this.page.toString() // string 否 分页 从1开始
				}
				let ajaxData = api.getAES(ajaxSign);
				api.GetCartItems(ajaxData)
					.then(res => {
						if(res.sta == 203) {
							this.$router.push({
								path: "/login"
							})
							return
						}
						//						let CartItems res.result
						this.CartItemsdata = this.CartItemsdata.concat(res.result);
						for(var i = 0; i < this.CartItemsdata.length; i++) {
							if(this.CartItemsdata[i].picture.length == 0) {
								this.CartItemsdata[i].picture = false
							}
							var date1 = new Date(this.CartItemsdata[i].lastTime * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
							var Y = date1.getFullYear();
							var M = (date1.getMonth() + 1 < 10 ? '0' + (date1.getMonth() + 1) : date1.getMonth() + 1);
							var D = date1.getDate();
							var HT = date1.getHours();
							var MT = date1.getMinutes();
							this.CartItemsdata[i].lastTime = M + "-" + D + " " + HT + ":" + MT;
						}

					})
			},
			initWebSocket() { //初始化weosocket
				//ws地址
				const wsuri = "ws://54.222.251.229:9501?token=" + this.mySessionUserinfo.token;;
				this.websock = new WebSocket(wsuri);
				this.websock.onmessage = this.websocketonmessage;
				//				this.websock.onclose = this.websocketclose;
			},
			websocketonmessage(e) { //数据接收
				this.CartItemsdata = [];
				this.redata = JSON.parse(e.data);
				this.GetCartItemsApi();
				//				this.initWebSocket();
				//						this.CartItemsdata = [];
				//						this.GetCartItemsApi();
			},

			websocketclose(e) { //关闭
				this.websock.close();
				console.log("connection closed (" + e.code + ")");
			}

		}
	}
</script>

<style>
	.ZhuddNews {
		width: 100%;
		color: #282828;
		font-size: .28rem;
	}
	
	.ZhuddNews .ZhuddNews-title {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
	}
	
	.ZhuddNews .title-box {
		width: 100%;
		display: flex;
		justify-content: center;
		overflow: hidden;
	}
	
	.ZhuddNews .ZhuddNews-title span {
		display: block;
		width: 50%;
		text-align: center;
		height: .69rem;
		line-height: .69rem;
		background: #fff;
		padding: 0 .37rem;
		box-sizing: border-box;
	}
	
	.ZhuddNews .ZhuddNews-title .titleactive {
		color: #e25051;
		border-bottom: .01rem solid #e25051;
	}
	
	.ZhuddNews .ZhuddNews-content {
		width: 100%;
	}
	/*日租列表*/
	/*长租导航*/
	
	.ZhuddNews .long-navul {
		width: 100%;
		display: flex;
	}
	
	.ZhuddNews .long-navitem {
		width: 33.3333%;
		text-align: center;
		line-height: .69rem;
		background: #fff;
	}
	/*房屋列表*/
	
	.ZhuddNews .shortorder .yd-list-loading>div {
		display: block !important;
	}
	/*折叠图标*/
	
	.ZhuddNews .yd-accordion-head-arrow:after {
		width: .23rem;
		height: .23rem;
		border: 1px solid #A4A4A4;
		transform: rotate(45deg);
		border-left: 0;
		border-top: 0;
	}
	
	.ZhuddNews .yd-accordion-head-arrow.yd-accordion-rotated:after {
		border: 1px solid #A4A4A4;
		border-right: 0;
		border-bottom: 0;
	}
	
	.ZhuddNews .yd-accordion-title {
		font-size: .31rem;
	}
	
	.ZhuddNews .accbill-item {
		display: flex;
		justify-content: space-between;
		padding: .1rem .24rem;
		box-sizing: border-box;
		font-size: .28rem;
	}
	/*在线聊天*/
	
	.ZhuddNews-leftitem {
		display: flex;
		padding: .24rem;
		box-sizing: border-box;
		border-bottom: .01rem solid #EEECEC;
	}
	
	.zli-newsgary {
		width: 5.3rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: .2rem;
	}
	
	.zli-textbox {
		display: flex;
		justify-content: space-between;
	}
	
	.zli-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: .11rem 0.2rem;
		box-sizing: border-box;
	}
	
	.zli-left {
		display: flex;
	}
	
	.zli-name {
		font-size: .31rem;
		color: #282828;
	}
	
	.zli-gary {
		font-size: .25rem;
		color: #a4a4a4;
	}
	
	.zli-icon {
		width: .97rem;
		height: .97rem;
		border-radius: 50%;
	}
	
	.zli-news {
		display: block;
		font-size: .21rem;
		text-align: center;
		color: #fff;
		background: #E25051;
		width: .47rem;
		line-height: .33rem;
		border-radius: .15rem;
	}
	
	.zli-item {
		padding: 0;
		width: 100%;
	}
</style>